<template>
    <div>
      
      <myheader></myheader>
  
      <br>
          <!-- 面包屑导航 -->
          <Breadcrumb :datas='datas'></Breadcrumb>
      <section class="featured-block text-center">
          <div class="container">

            <div>
                <table>

                <h3>活动列表展示</h3>
                <br>
                    <tr>
                        <th>#&nbsp;&nbsp;</th>
                        <th>title</th>
                        <th>link</th>
                        <th>img</th>
                        <th>修改</th>
                        <th>删除</th>
                    </tr>

                    <tr v-for="(item, index) in items" :key="index">
                        <td>{{ index+1 }}</td>
                        <td>{{ item.title }}</td>
                        <td>{{ item.link }}</td>
                        <td>{{ item.img }}</td>
                        <td><Button><a href="/update_pics">修改</a></Button></td>
                        <td><Button @click='delete_pics()'>删除</Button></td>
                    </tr>

                </table>

            <br><br>

            </div>

              <table>

                <h3>活动添加</h3>
                <br>
                  <tr style='padding: 5px;'>
                      <td style='padding: 5px;'>
                          活动名称:
                      </td>
                      <td style='padding: 5px;'>
                          <input type="text" name="" id="" v-model='title'>
                      </td>
                  </tr>

                  <tr style='padding: 5px;'>
                    <td style='padding: 5px;'>
                            链接地址:
                    </td>
                    <td style='padding: 5px;'>
                        <input type="text" name="" id="" v-model='link'>
                    </td>
                  </tr>

                    <tr style='padding: 5px;'>
                        <td style='padding: 5px;'>
                            图片链接:
                        </td>
                        <td style='padding: 5px;'>
                            <input type="text" name="" id="" v-model='img'>
                        </td>
                    </tr>
                      
                  <tr style='padding: 5px;'>
                      <td style='padding: 5px;'>
  
                      </td>
                      <td style='padding: 5px;'>
                          <Button @click='submit'>提交</Button>&nbsp;&nbsp;
                          
  
                      </td>
                  </tr>
  
              </table>
  
          </div>
      </section>
      
      <myfooter></myfooter>
      
    </div>
    
  </template>
  
  
   
  <script>
  
  //导包
  import myheader from './myheader.vue';
  import myfooter from './myfooter.vue';
  
  import {config,formatXml} from '../config.js'
  
  
  export default {
    data () {
      return {
        // msg: "这是一个变量",
        //声明面包屑变量
        datas:[{title:'首页',route:{name:'index'}},{title:'活动页面'}],
        title:'',
        new_title:'',
        link:'',
        img:'',

        items:[],

      }
    },
  
    //注册组件标签
    components:{
      'myheader': myheader,
      'myfooter': myfooter,
  
    },
  
    mounted:function(){
        //获取用户信息
	    this.axios.get(config['after_end'] + '/look_pics/').then((result)=>{

        //打印接口返回值
        console.log(result)
        this.items = result.data.data

        })

  },
    methods:{
        //提交密码修改
        submit:function(){
  
            //向后端发送请求
            this.axios.get(config['after_end'] + '/insertpics/',{params:{title:this.title,link:this.link,img:this.img}}).then((result)=>{
                //打印接口返回值
                console.log(result)
                //提醒用户已修改成功
                this.$Message(result.data.message)

            })

        },

        //删除接口
        delete_pics:function(){
          +this.axios.get(config['after_end'] + '/delete_pics/',{params:{title:this.title}}).then((result)=>{

            this.$Message(result.data.message)

          })

        }

    }

  }
  
  
  </script>
   
  <style>
  
  
  
  </style>